<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../util/bootstrap-3.3.7-dist/css/bootstrap.css">
    <script src="../util/jquery-3.4.1.js"></script>
    <script src="../util/bootstrap-3.3.7-dist/js/bootstrap.js"></script>
    <link rel="stylesheet" href="../css/paimanage.css">

</head>

<body>
    <h2>权限管理</h2>
    <div class="class-part" id="div1">
        <span style="float: left">所有员工</span>
        <button type="button" class="btn staff_add_btn btn-primary btn-md" data-toggle="modal" data-target="#myModal"
            style="float: right;position: relative;top: -10px" id="btn">
            ＋添加员工权限
        </button>
        <!-- Modal -->
        <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" id="myModalLabel">添加员工权限</h4>
                    </div>
                    <form class="form-horizontal">
                        <div class="form-group">
                            <label for="inputEmail3" class="col-sm-2 control-label">员工姓名:</label>
                            <div class="col-sm-10">
                                <input type="email" class="form-control" id="inputEmail3" placeholder="请输入正确的员工姓名">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="inputPassword3" class="col-sm-2 control-label">员工部门:</label>
                            <div class="col-sm-10">
                                <input class="form-control" id="inputPassword4" placeholder="输入正确的员工部门">
                            </div>
                        </div>
                        <div class="form-group form-check">
                            <label for="inputPassword3" class="col-sm-2 control-label"
                                style="margin-left: 8px">员工权限：</label>
                            <label class="checkbox-inline" style="margin-left: 10px">
                                <input type="checkbox" id="inlineCheckbox1" value="考勤管理"> 考勤管理
                            </label>
                            <label class="checkbox-inline" style="margin-left: 20px">
                                <input type="checkbox" id="inlineCheckbox2" value="班级管理"> 班级管理
                            </label>
                            <label class="checkbox-inline" style="margin-left: 20px">
                                <input type="checkbox" id="inlineCheckbox3" value="照片墙"> 照片墙
                            </label>
                            <label class="checkbox-inline" style="margin-left: 20px">
                                <input type="checkbox" id="inlineCheckbox4" value="公告管理"> 公告管理
                            </label>
                            <label class="checkbox-inline" style="margin-left: 20px">
                                <input type="checkbox" id="inlineCheckbox5" value="部门管理"> 部门管理
                            </label>
                            <label class="checkbox-inline" style="margin-left: 122px">
                                <input type="checkbox" id="inlineCheckbox6" value="员工管理"> 员工管理
                            </label>
                            <label class="checkbox-inline" style="margin-left:20px ">
                                <input type="checkbox" id="inlineCheckbox7" value="权限管理"> 权限管理
                            </label>
                            <label class="checkbox-inline" style="margin-left:19px ">
                                <input type="checkbox" id="inlineCheckbox8" value="学生管理"> 学生管理
                            </label>
                        </div>
                    </form>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-danger" data-dismiss="modal">取消</button>
                        <button type="button" class="btn staff_sure btn-primary" data-dismiss="modal">确认</button>
                    </div>
                </div>
            </div>
        </div>
        <table class="table table-bordered" id="staff_ta">
            <thead>
                    <tr class="staff_on">
                        <th style="text-align: center">编号</th>
                        <th style="text-align: center">员工</th>
                        <th style="text-align: center">部门</th>
                        <th style="text-align: center">员工权限</th>
                        <th style="text-align: center">操作</th>
                    </tr>
            </thead>

            <tbody>

            </tbody>
        </table>
        <div class="modal fade" id="attedit" tabindex="-1" role="dialog" aria-labelledby="my-1">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" id="my-1">编辑</h4>
                    </div>
                    <div class="modal-body">
                        <form class="form-horizontal">
                            <div class="form-group edit" edit-check>
                                <label for="inputPassword3" class="col-sm-2 control-label">增加权限:</label>
                                <label class="checkbox-inline" style="margin-left: 20px">
                                    <input type="checkbox" class="inlineCheckboxa" value="考勤管理"> 考勤管理
                                </label>
                                <label class="checkbox-inline">
                                    <input type="checkbox" class="inlineCheckboxa" value="班级管理"> 班级管理
                                </label>
                                <label class="checkbox-inline">
                                    <input type="checkbox" class="inlineCheckboxa" value="照片墙"> 照片墙
                                </label>
                                <label class="checkbox-inline">
                                    <input type="checkbox" class="inlineCheckboxa" value="公告管理"> 公告管理
                                </label>
                                <label class="checkbox-inline">
                                    <input type="checkbox" class="inlineCheckboxa" value="部门管理"> 部门管理
                                </label>
                                <label class="checkbox-inline" style="margin-left: 120px">
                                    <input type="checkbox" class="inlineCheckboxa" value="员工管理"> 员工管理
                                </label>
                                <label class="checkbox-inline">
                                    <input type="checkbox" class="inlineCheckboxa" value="权限管理"> 权限管理
                                </label>
                                <label class="checkbox-inline">
                                    <input type="checkbox" class="inlineCheckboxa" value="学生管理"> 学生管理
                                </label>
                            </div>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                        <button type="button" class="btn btn-primary Cget" data-dismiss="modal" id="editData">确认</button>
                    </div>
                </div>
            </div>
        </div>
        <nav aria-label="Page navigation" style="text-align: center">
            <ul class="pagination" id="pageBox">
                <!-- <li>
                    <a href="#" aria-label="Previous">
                        <span style="font-size: 14px;">&laquo;</span>
                    </a>
                </li>
                <li class="active"><a href="#">1</a></li>
        
                <li>
                    <a href="#" aria-label="Next">
                        <span style="font-size: 14px;">&raquo;</span>
                    </a>
                </li> -->
            </ul>
        </nav>
    </div>
</body>
<script>
    var table_list = $('.tabl0.e').children().children();
    var check_list = $('.form-check').children().children();
    var index;
    var res = [];
    var list_length = table_list.length;
    var oPageBox = $('#pageBox');
    var arr = JSON.parse(localStorage.getItem('staff')) || [];
    var oArr = ['考勤管理', '班级管理', '照片墙', '公告管理', '部门管理', '员工管理', '权限管理', '学生管理'];

    var remove = function () {
        $(".staff_on").eq(index).remove();
        $(".resure").off("click", remove);
    };
    $(".staff_delete_btn").on("click", function () {
        index = $(this).index();
        $(".resure").on("click", remove);
    });
    $('.staff_sure').on('click', function () {
        var oInp = $('#inputEmail3').val();
        var oStaff_in = $('#inputPassword4').val();
        var limit_str = '';

        for (var i = 0; i < check_list.length; i++) {
            if (check_list.eq(i).prop("checked")) {
                limit_str = limit_str.concat(check_list.eq(i).attr("value") + ' ');
                check_list.eq(i).prop("checked", false);
            }
        }
        $('tbody').append('<tr><td>' + list_length++ + '</td><td>' + oInp + '</td><td>' + oStaff_in +
            '</td><td>' + limit_str + '</td><td>' +
            '<button type="button" class="btn staf14f_edit btn-primary btn-md"  data-toggle="modal" data-target="#attedit">' +
            '编辑' + '</button>');
    });

    var limit = 5; //设置一页5条数据
    var page = 1;//当前页
    var pageNum = Math.ceil(arr.length/limit);

    function getPageNum() {
       
        //添加上一页
        oPageBox.append($('<li label="Previous"><a href="#" aria-label="Previous"><span style="font-size: 14px;">&laquo;</span></a></li>'));

        //添加数字
        for (var i = 0; i < pageNum; i++) {
            var oLi = $('<li><a href="#">' + (i + 1) + '</a></li>');
            oPageBox.append(oLi);
            if (i == 0) {
                oLi.addClass('active');
            }
        }

        //添加下一页
        oPageBox.append($('<li label="Next"><a href="#" aria-label="Next"><span style="font-size: 14px;">&raquo;</span></a></li>'));
    

    }
    getPageNum();
    //获取某一页的数据
    function getPageData(index) {
        res = arr.slice((index - 1) * limit, limit * index);

        //将tbody数据清空
        $('tbody').empty();
        // 将输入动态插入到tbody中
        for(var i = 0;i<res.length;i++){
            let index = i+1;
            if(!res[i].role){
                res[i].role = '';
            }
            $('tbody').append('<tr><td>' + index + '</td><td>' + res[i].name + '</td><td>' + res[i].department +
            '</td><td>' + res[i].role + '</td><td>' +
            '<button type="button" class="btn staf14f_edit btn-primary btn-md"  data-toggle="modal" data-target="#attedit">' +
            '编辑' + '</button>');
        }

    }
    getPageData(page);
    //点击页码 获取当页的数据
    oPageBox.on('click', 'li', function (e) {
        if(!$(this).attr('label')){
            getPageData($(this).text());
            page = $(this).text();
        }else{
            //判断上下页按钮
            if($(this).attr('label') == 'Previous'){
                if(page == 1){
                    alert('已经是第一页了')
                }else{
                    page--
                    getPageData(page);
                }
            }else{
                if(page == pageNum){
                    alert('已经是最后一页了')
                }else{
                    page++
                    getPageData(page);
                }
            }
        }

        $('#pageBox li').eq(page).addClass('active').siblings('li').removeClass('active');

    })

    //事件委托
    $('#staff_ta').on('click','button',function(e){
        //获取标签内容
        var role = e.target.parentNode.previousSibling.innerText;
        
        //动态添加唯一标识
        $("table tr").removeClass("role");
        e.target.parentNode.parentNode.classList.add("role");


        //将字符串转化为数组
        var array = role.split(' ');
        var inputs = $('.edit input');
        //清空上次选中
        for(var z = 0;z<inputs.length;z++){
            $('.edit input').eq(z).prop('checked',false);
        }
        //交叉对比设置默认选中
        for(var i = 0;i<inputs.length;i++){
            for(var j = 0;j<array.length;j++){
                if(array[j] == inputs[i].defaultValue){
                    $('.edit input').eq(i).prop('checked',true);
                    break;
                }
            }
        }
    })
    //编辑
    $('#editData').on('click',function(){
        //获取数据
        var limit_str = '';
        var check_list_edit = $('.edit').children().children();
        for (var i = 0; i < check_list_edit.length; i++) {
            if (check_list_edit.eq(i).prop("checked")) {
                limit_str = limit_str.concat(check_list_edit.eq(i).attr("value") + ' ');
                check_list_edit.eq(i).prop("checked", false);
            }
        }
        //根据唯一标识设置默认值
        $('table .role td').eq(3).html(limit_str);
    })
</script>

</html>